<template>
  <!-- 搜索栏组件：目前用在养殖作业和养殖档案
      props: 搜索栏分类数据——基地:searchByType1data 操作名称:searchByType2data 第二个搜索名称：type2Name 
      emit: getDataBySelectTime:时间选择器 分类选择——基地：getDataBySelectType1 养殖状态/操作名称：getDataBySelectType2 
            关键词：getDataByKeyword-->
  <div class="search-bar">
    <el-card>
      <h4 style="background-color: #f8f8f9;">搜索</h4>
      <el-row :gutter="24">
        <el-col :span="14">
          <div class="grid-content">
            <div class="grid-content-title">养殖日期:</div>
            <el-date-picker v-model="date" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
              @change="chooseTimeRange" type="datetimerange" align="right" unlink-panels range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
            </el-date-picker>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content">
            <div class="grid-content-title">关键词:</div>
            <!-- 输入关键词搜索框 -->
            <el-autocomplete class="inline-input" v-model="gridContent" placeholder="请输入档案编号/操作人" @select="handleSelect"
              clearable @input="keywordSearch">
            </el-autocomplete>
          </div>
        </el-col>
      </el-row>
      <!-- 分类搜索 -->
      <el-row :gutter="24">
        <el-col :span="10">
          <div class="grid-content">
            <div class="grid-content-title">基地:</div>
            <el-select v-model="value1" placeholder="请选择" @change="chooseType1" clearable>
              <el-option v-for="item in Type1data" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="10">
          <div class="grid-content">
            <!-- 养殖状态 -->
            <div class="grid-content-title">{{type2Name}}</div>
            <el-select v-model="value2" placeholder="请选择" @change="chooseType2" clearable>
              <el-option v-for="item in Type2data" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'OperationsSearchBar',
    // 分类搜索
    props: {
      // 搜索栏分类数据
      // 基地
      searchByType1data: {
        type: Array,
        default: () => []
      },
      // 操作名称
      searchByType2data: {
        type: Array,
        default: () => []
      },
      type2Name: {
        type: String,
        default: () => ""
      },
    },
    data() {
      return {
        //   时间选择器
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近半年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        // 分类搜索类别
        Type1data: [],
        Type2data: [],
        value1: '',
        value2: '',
        // label: '',
        date: '',
        // 关键词
        gridContent: '',
      }
    },
    mounted() {},
    methods: {
      // 输出时间选择器选择时间
      chooseTimeRange(t) {
        this.$emit('getDataBySelectTime', t);
      },
      // 输出分类选择器选择的分类
      // 基地
      chooseType1(vId) {
        console.log(vId)
        var type = "";
        if (vId) {
          let obj = {};
          obj = this.Type1data.find((item) => {
            return item.value === vId; //筛选出匹配数据
          });
          type = obj.label;
        }
        this.$emit('getDataBySelectType1', type)
      },
      // 养殖状态/操作名称
      chooseType2(vId) {
        console.log(vId)
        var type = "";
        if (vId) {
          let obj = {};
          obj = this.Type2data.find((item) => {
            return item.value === vId; //筛选出匹配数据
          });
          type = obj.label;
        }
        this.$emit('getDataBySelectType2', type)
      },
      // 输出关键词输入框
      keywordSearch() {
        if (this.timer) {
          clearTimeout(this.timer);
        }
        this.timer = setTimeout(() => {
          // console.log(this.gridContent)
          this.$emit('getDataByKeyword', this.gridContent)
        }, 500)

      },
      // 搜索关键字
      loadAll() {
        console.log(this.farmingIdList)
        return this.farmingIdList;
      },
      handleSelect(item) {
        console.log("searchBarSelected" + item);
      }
    },
    watch: {
      searchByType1data: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.Type1data = newVal;
            console.log(this.Type1data)
          }
        },
        immediate: true,
        deep: true
      },
      searchByType2data: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.Type2data = newVal
            console.log(this.Type2data)
          }
        },
        immediate: true,
        deep: true
      },
    },
  }

</script>

<style>
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    min-height: 36px;
    display: flex;
    flex-direction: row;
    padding-top: 10px;
  }

  .grid-content-title {
    font-weight: 500;
    font-size: 14px;
    padding: 8px;
    cursor: default;
  }

</style>
